<!--
 * @Author: blak-kong
 * @Date: 2019-12-12 11:27:37
 * @Email: 546598185@qq.com
 -->
<template>
  <div class="recommend">
    <el-tabs type="border-card">
        <el-tab-pane label="热门课程">
            热门课程
            <div class="recommend-box">
                <RecomCp 
                    tab-name="courses" 
                    :table-data.sync="recommend.courses" 
                    @add="add"
                    @all-save="allSave"
                    @delete-data="deleteData"
                    @delete-row="deleteRow"
                    @handle-upload-success="handleUploadSuccess">
                </RecomCp>
            </div>
        </el-tab-pane>
        <el-tab-pane label="新书推荐">
            新书推荐
            <div class="recommend-box">
                <RecomCp 
                    tab-name="books" 
                    :table-data.sync="recommend.books"
                    @add="add"
                    @all-save="allSave"
                    @delete-data="deleteData"
                    @delete-row="deleteRow"
                    @handle-upload-success="handleUploadSuccess">
                </RecomCp>
            </div>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import RecomCp from "../components/RecomCp"
export default {
    components: {
        RecomCp
    },
    data() {
        return {
            recommend: {
                courses: [],
                books: []
            }
        }
    },
    created() {
        this.getRecommend()
    },
    mounted() {
        
    },
    methods: {
        allSave(obj, name) {
            this.$axios.post(`/api/recommend/update`, this.recommend).then(res => {
                if (res.data.errno === 0) {
                     // 获取mongodb 最新文档版本 __v 避免数据冲突
                     this.recommend = res.data.result
                     this.$message({
                        message: res.data.msg,
                        type: "success"
                    })
                    return
                }
                this.$message(res.data.msg)
            })
        },
        add(obj, name) {
            this.recommend[name].push(obj)
        },
        deleteData(obj, name) {
             this.$axios.post(`/api/recommend/delete/${obj.id}`, this.recommend[name]).then(res => {
                if (res.data.errno === 0) {
                     this.$message({
                        message: res.data.msg,
                        type: "success"
                    })
                    this.deleteRow(obj.index, name)
                    return
                }
                this.$message(res.data.msg)
            })
        },
        deleteRow(obj, name) {
             this.recommend[name].splice(obj.index, 1)
        },
        getRecommend(obj, name) {
            this.$axios('/api/recommend').then(res => {
                if (res.data.errno === 0)  {
                    this.recommend = res.data.result
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    })
                }
            })
        },

        handleUploadSuccess(obj, name) {
            this.recommend[name][obj.tableIndex].img = process.env.VUE_APP_IMG + res.filename
        },
    }
}
</script>

<style>
.recommend {
    padding: 20px;
}
</style>